

import  $Element  from '@/core/Element';
import { DOMcreateElement } from '@/core/jsxFactory';
import HColorPickerCreater from './HColorPicker';
export default class ColorPicker extends $Element{
    private container:$Element;
    private HColorComponent:$Element;
    private colorArea:$Element;
    private colorTopArea:$Element;
    private BColor:$Element;
    private SColor:$Element;
    private HColorValue:number = 0;
    private BColorValue:number = 100;
    private SColorValue:number = 50;
    private dragColorBar:$Element;
    constructor(container: $Element){
        super(<div className="color-picker"></div>)
        this.container = container;
        this.HColorComponent = HColorPickerCreater(this.drageMoveHColorComponent.bind(this),this.mouseupHColorComponent.bind(this));
        this.container.appendChild(this);
        this.colorTopArea = new  $Element(<div className="color-picker-top">
            <div className="color-picker-area"></div>
        </div>);
        this.appendChild(this.colorTopArea);
        this.colorArea = new $Element(".color-picker-area");
        this.colorArea.setStyleWithProp("backgroundColor",`hsl(${this.HColorValue},${this.BColorValue}%,${this.SColorValue}%)`);
        this.colorTopArea.appendChild(this.HColorComponent);
        this.BColor = new $Element(<div></div>);
        this.SColor = new $Element(<div></div>);
        this.dragColorBar = new $Element(<div></div>);

        // this.createSubComponents();
    }
    mouseupHColorComponent(evt:Event){
        const event = evt as MouseEvent;
        const self:any = event.target;
        const HBaseValue = self.offsetHeight / 2 + parseInt(self.style.top.replace("px",""));
        this.HColorValue = Math.round(HBaseValue/self.parentNode.offsetHeight*360);
        this.colorArea.setStyleWithProp("backgroundColor",`hsl(${this.HColorValue},${this.BColorValue}%,${this.SColorValue}%)`);
    }
    drageMoveHColorComponent(evt:Event){
        const event = evt as MouseEvent;
        const self:any = event.target;
        const HBaseValue = self.offsetHeight / 2 + parseInt(self.style.top.replace("px",""));
        this.HColorValue = Math.round(HBaseValue/self.parentNode.offsetHeight*360);

        this.colorArea.setStyleWithProp("backgroundColor",`hsl(${this.HColorValue},${this.BColorValue}%,${this.SColorValue}%)`);
    }

}